<template>
  <div class="  container">
    <router-view></router-view>
    <div class="index">
      <Header  :isShowMyCourse="true"/>
      <div class="main-center2 " style="height: auto; margin-bottom:  0px;">
        <div class="train-con">
          <div class="train-con-list">
            <div class="t-tit">
              <h3>精品课程</h3>
              <span class="fr  fi-search">
                <el-input v-model="input" style="width: 223px;" class="fl search-inp" placeholder="输入名称搜索"></el-input>
                <el-button class="fl" style="height: 40px;" @click="getCatList(categoryId, current, 1, payuswitch, sort, input, typeCurrent,payCurrent)">搜索</el-button>
              </span>
            </div>
            <div class="filter">
              <dl>
                <dt>资源分类：</dt>
                <dd :class="{ cur: current == -1 }" @click="getAll()">全部</dd>
                <dd :class="{ cur: current == index }" v-for="(item, index) in list" :key="index" @click="getCatList(item.id, index, 1, payuswitch, sort, '', typeCurrent,payCurrent)">
                  {{ item.name }}
                </dd>
              </dl>
              <dl>
                <span class="zk-fr"  @click="goZK(1)" v-if="zk_status==0"></span>
                <span class="zk-fr cur"  @click="goZK(0)"  v-if="zk_status==1"></span>

                <dt>筛选：</dt>
                <dd
                  :class="{ cur: typeCurrent == index }"
                  v-for="(item, index) in type"
                  :key="index"
                  @click="getCatList(categoryId, current, 1, payuswitch, 'paynumber', '', index,payCurrent)"
                >
                  {{ item }}
                </dd>
                <!-- <dd @click="getCatList(categoryId,current,1,payuswitch,'paynumber','')">最热</dd>
                <dd>最新</dd> -->
              </dl>
              <dl   v-if="zk_status==1">
                <dt></dt>
                <dd
                  :class="{ cur: payCurrent == index }"
                  v-for="(item, index) in payType"
                  :key="index"
                  @click="getCatList(categoryId, current, 1, payuswitch, 'paynumber', '', typeCurrent, index)"
                >
                  {{ item }}
                </dd>
              </dl>
            </div>

            <ul class="  my-c-list"  v-if="all_lesson.length>0">
              <li v-for="(item, index) in all_lesson" :key="index" @click="goProcess(item.id)">
                <div class="pic_area"><img classs="pic" :src="item.image" /></div>
                <label class="jk" style="background-color: rgba(0,0,0,0.16);">{{ item.contentnum }}节课</label>
                <p>
                  <span class="tit more">
                    {{ item.name }}
                    <label class="fr price" v-if="item.payuswitch == 2">￥{{ item.price }}</label>
                    <label class="fr price" v-else>￥免费</label>
                  </span>
                </p>
                <p>{{ item.validity }}<span v-if="item.validity_status==1">到期</span></p>
                <p>
                  <label class="  mr20 ">{{ item.paysnum }}次学习</label>
                  <label class=" fr baom" v-if="item.paystatus == 0" @click="goName(item.id)">报名</label>
                  <label class=" fr baom cur" v-else>已报名</label>
                </p>
              </li>
            </ul>
            <el-empty description="暂无内容" v-else></el-empty>
            <div class="clear mt30"></div>

            <div class="page-area">
              <span type="button" class="btn-home fl" style="cursor: pointer;" @click="getCatList(categoryId, current, 1, payuswitch, sort, input, typeCurrent,payCurrent)">首页</span>
              <el-pagination
                background
                layout="  prev, pager, next "
                :current-page="currentPage"
                :total="total"
                :page-size="1"
                @current-change="handleCurrentChange"
              ></el-pagination>
              <span type="button" style="cursor: pointer;" class="btn-last fr" @click="getCatList(categoryId, current, total, payuswitch, sort, input, typeCurrent,payCurrent)">尾页</span>
            </div>
          </div>
        </div>
      </div>
    </div>

   <div class="r-xcx" ><span class="sp">微信小程序</span>
      <div class="r-xcx2" >
       <h3>培训平台小程序</h3>
        <img width="169" style="margin-top: 26px;" src="/static/img/qr.png" />
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header_train.vue';
import Copyright from '../../components/copyright2.vue';
export default {
  data() {
    return {
      type: ['综合排序', '最热', '最新'],
      payType: ['全部', '免费', '收费'],
      jingType: ['全部', '精品'],
      isOpen: true,
      value: [],
      input: '',
      list: '',
      all_lesson: '',
      token: '',
      total: 10,
      current: -1,
      categoryId: '',
      currentPage: 1,
      payuswitch: '', //1=免费,2=收费 默认不传参数
      sort: '', //最热=paynumber，最新=addtime 默认不传参数
      keyword: '', //搜索值
      typeCurrent: 0, //筛选当前选中
      payCurrent: 0,
      jingCurrent:0,
      zk_status: 0
    };
  },
  created() {
    this.token = localStorage.getItem('token');
    this.getAll();
  },
  methods: {
    getAll() {
      this.isOpen = false;
      this.current = -1;
      this.categoryId = '';
      let formData = {
        token: this.token
      };
      //课程分类
      this.$api('getCourseList.getCategoryList', formData).then(res => {
        this.list = res.data;
      });
      let all_form = {
        token: this.token,
        page: 1,
        limit: 8,
        boutiquestatus:1
      };
      //全部课程
      this.$api('getCourseList.index', all_form).then(res => {
        this.all_lesson = res.data.data;
        this.total = res.data.last_page;
      });
    },

    getCatList(id, index, page = 1, pay, sort, keyword, typeCurrent, payCurrent,jingCurrent) {
      if (page == 1) {
        this.currentPage = 1;
      } else if (page == this.total) {
        this.currentPage = this.total;
      }
      this.categoryId = id;
      this.current = index;
      this.typeCurrent = typeCurrent;
      this.payCurrent = payCurrent;
      this.jingCurrent = jingCurrent;
      if (this.typeCurrent == 0) {
        this.sort = '';
      } else if (this.typeCurrent == 1) {
        this.sort = 'paynumber';
      } else if (this.typeCurrent == 2) {
        this.sort = 'createtime';
      }
      if (this.payCurrent == 0) {
        this.payuswitch = '';
      } else if (this.payCurrent == 1) {
        this.payuswitch = '1';
      } else if (this.payCurrent == 2) {
        this.payuswitch = '2';
      }
      this.keyword = keyword;

      let all_form = {
        token: this.token,
        page: page,
        limit: 8,
        cid: this.categoryId,
        payuswitch: this.payuswitch,
        sort: this.sort,
        keyword: this.input,
        boutiquestatus:1
      };
      //分类课程
      this.$api('getCourseList.index', all_form).then(res => {
        this.all_lesson = res.data.data;
        this.total = res.data.last_page;
      });
    },
    handleCurrentChange(e) {
      //console.log(e);
      this.currentPage = e;
      this.getCatList(this.categoryId, this.current, e, this.payuswitch, this.sort, this.keyword, this.typeCurrent,this.payCurrent);
    },
    openDetail() {
      this.$router.push('/process');
    },
    goProcess(id) {
      this.$router.push('/trainDetail?id='+id);
    },
    goZK(status) {
      this.zk_status = status;
    },
    goCollect() {
      this.$router.push('/courseCollect');
    }
  },
  components: { Header, Copyright }
};
</script>

<style lang="scss" scoped></style>
